/**
 * 文件名: src/components/Editor.tsx
 * 
 * 文件概述:
 * 文本编辑器组件，提供富文本编辑功能，支持章节内容编辑和AI响应插入。
 * 
 * 依赖项:
 * - 'use client': 声明为客户端组件
 * - react: React核心库和hooks
 * - react-quill: 富文本编辑器(import ReactQuill from 'react-quill')
 * - antd: Spin组件(加载状态)和Typography(字数统计)
 * - ../store: 状态管理(editorContent, selectedChapter, isLoading)
 * 
 * UI设计:
 * - 编辑器顶部工具栏:
 *   - 浅灰色背景(#fafafa)
 *   - 包含导航图标(返回、历史、刷新)
 *   - 右侧显示字数统计("Words: 1,245")
 *   - 右侧视图和设置图标
 * 
 * - 编辑器内容区:
 *   - 纯白背景(#ffffff)
 *   - 标题: 大号黑体，居中显示("The Last Kingdom")
 *   - 章节标题: 粉红色文字，居中显示("Chapter 1: The Beginning")
 *   - 正文: 黑色文字，左对齐，段落缩进
 *   - 编辑光标: 线条光标
 * 
 * - 编辑器底部:
 *   - 显示当前光标位置("Line: 42 | Column: 15")
 *   - 右侧显示AI助手状态("AI Assistant: Ready")
 * 
 * 组件结构:
 * - Editor: () => JSX.Element
 *   - Spin: 加载状态包装器
 *     - 工具栏区域(图标和功能按钮)
 *     - ReactQuill编辑器(主要内容区)
 *     - 底部信息栏(行号、列号、状态)
 * 
 * 状态:
 * - 本地状态:
 *   - editorRef: useRef<ReactQuill>(null) - 编辑器实例引用
 *   - stats: useState({ words: 0, cursor: { line: 0, column: 0 } }) - 字数和光标位置
 * - 全局状态(从store获取):
 *   - editorContent: 编辑器内容
 *   - selectedChapter: 当前选中章节
 *   - isLoading.editor: 编辑器加载状态
 * 
 * 副作用:
 * - 监听selectedChapter变化: 更新编辑器内容
 * - 定时更新字数统计: setInterval计算文本统计信息
 * - 监听AI响应插入: 处理来自AIDialog的内容插入请求
 * 
 * ReactQuill配置:
 * - 模块配置(工具栏、格式等)
 * - 格式配置(支持的格式)
 * - 自定义处理器(如需要)
 * 
 * 内容更新处理:
 * - onChange: (content) => useAppStore.getState().setEditorContent(content)
 * - 内容插入: (aiResponse, mode) => {插入或替换选中内容}
 * 
 * 公开方法(通过ref或store):
 * - insertText: 在光标位置插入文本
 * - replaceSelection: 替换选中内容
 * - getCurrentSelection: 获取当前选中内容和位置
 * 
 * 生命周期:
 * - 组件挂载: 设置编辑器实例、启动统计定时器
 * - 组件卸载: 清理定时器、保存当前内容
 * 
 * 注意事项:
 * - 确保内容变化时更新store且触发保存(通过store的setEditorContent)
 * - 处理编辑器焦点管理(插入内容后恢复焦点)
 * - 字数统计考虑实际文本内容(排除HTML标签)
 * - 内容保存操作应该防抖处理(在store中实现)
 */

'use client';

import React, { useState, useEffect, useRef, useCallback } from 'react';
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';
import { Spin, Typography, Tooltip, Button, Row, Col, message } from 'antd';
import { 
  ArrowLeftOutlined, 
  HistoryOutlined, 
  ReloadOutlined,
  EyeOutlined,
  SettingOutlined,
  SaveOutlined,
  UndoOutlined,
  RedoOutlined,
  BoldOutlined,
  ItalicOutlined,
  UnderlineOutlined
} from '@ant-design/icons';
import { useAppStore } from '../store';

const { Text } = Typography;

// ReactQuill富文本编辑器配置
const modules = {
  toolbar: [
    [{ 'header': [1, 2, 3, false] }],
    ['bold', 'italic', 'underline', 'strike'],
    [{ 'align': [] }],
    [{ 'list': 'ordered'}, { 'list': 'bullet' }],
    [{ 'indent': '-1'}, { 'indent': '+1' }],
    [{ 'color': [] }, { 'background': [] }],
    ['clean']
  ]
};

const formats = [
  'header',
  'bold', 'italic', 'underline', 'strike',
  'align', 'list', 'indent',
  'color', 'background'
];

// 统计文本字数，排除HTML标签
const countWords = (html: string): number => {
  if (!html) return 0;
  
  // 创建一个临时DOM元素来解析HTML
  const tempDiv = document.createElement('div');
  tempDiv.innerHTML = html;
  
  // 获取纯文本
  const text = tempDiv.textContent || tempDiv.innerText || '';
  
  // 分割成单词并计数（基本计算方法，可以改进）
  return text.trim().split(/\s+/).filter(word => word.length > 0).length;
};

// 计算光标位置（行和列）
const getCursorPosition = (editor: ReactQuill): { line: number; column: number } => {
  if (!editor || !editor.getEditor()) {
    return { line: 0, column: 0 };
  }
  
  const selection = editor.getEditor().getSelection();
  if (!selection) {
    return { line: 0, column: 0 };
  }
  
  // 获取行和列信息（简化实现，实际情况可能需要更精确的计算）
  const text = editor.getEditor().getText().substring(0, selection.index);
  const lines = text.split('\n');
  const line = lines.length;
  const column = lines[lines.length - 1].length + 1;
  
  return { line, column };
};

// 编辑器组件
const Editor = () => {
  // 编辑器引用
  const editorRef = useRef<ReactQuill>(null);
  
  // 本地状态
  const [stats, setStats] = useState({ 
    words: 0, 
    cursor: { line: 0, column: 0 } 
  });
  const [aiStatus, setAiStatus] = useState('准备就绪');
  
  // 获取全局状态
  const { 
    editorContent, 
    selectedChapter, 
    setEditorContent, 
    isLoading 
  } = useAppStore();
  
  // 处理编辑器内容变化
  const handleChange = (content: string) => {
    setEditorContent(content);
  };
  
  // 在光标位置插入文本
  const insertText = useCallback((text: string) => {
    if (!editorRef.current) return;
    
    const editor = editorRef.current.getEditor();
    const range = editor.getSelection();
    
    if (range) {
      editor.insertText(range.index, text);
      // 恢复焦点和选区
      editor.setSelection(range.index + text.length, 0);
    } else {
      // 如果没有选区，则插入到末尾
      const length = editor.getText().length;
      editor.insertText(length, text);
      editor.setSelection(length + text.length, 0);
    }
  }, []);
  
  // 替换选中内容
  const replaceSelection = useCallback((text: string) => {
    if (!editorRef.current) return;
    
    const editor = editorRef.current.getEditor();
    const range = editor.getSelection();
    
    if (range && range.length > 0) {
      editor.deleteText(range.index, range.length);
      editor.insertText(range.index, text);
      editor.setSelection(range.index + text.length, 0);
    } else {
      insertText(text);
    }
  }, [insertText]);
  
  // 获取当前选中内容
  const getCurrentSelection = useCallback((): { text: string; range: any } => {
    if (!editorRef.current) return { text: '', range: null };
    
    const editor = editorRef.current.getEditor();
    const range = editor.getSelection();
    
    if (range && range.length > 0) {
      const text = editor.getText(range.index, range.length);
      return { text, range };
    }
    
    return { text: '', range };
  }, []);
  
  // 监听章节变化，更新编辑器内容
  useEffect(() => {
    if (selectedChapter) {
      setEditorContent(selectedChapter.content);
    }
  }, [selectedChapter, setEditorContent]);
  
  // 定时更新统计信息
  useEffect(() => {
    const updateStats = () => {
      if (editorRef.current) {
        setStats({
          words: countWords(editorContent),
          cursor: getCursorPosition(editorRef.current)
        });
      }
    };
    
    // 初始更新统计
    updateStats();
    
    // 设置定时器每秒更新统计信息
    const intervalId = setInterval(updateStats, 1000);
    
    // 清理定时器
    return () => clearInterval(intervalId);
  }, [editorContent]);
  
  // 处理AI响应接收
  useEffect(() => {
    // 模拟接收AI响应的效果
    const handleAIResponse = (event: any) => {
      if (event.detail?.type === 'ai-response' && event.detail?.content) {
        setAiStatus('正在写作');
        
        // 插入内容
        const { content, mode } = event.detail;
        
        // 根据模式选择插入或替换
        if (mode === 'replace') {
          replaceSelection(content);
        } else {
          insertText(content);
        }
        
        setTimeout(() => setAiStatus('准备就绪'), 1000);
      }
    };
    
    // 添加自定义事件监听器
    window.addEventListener('ai-response', handleAIResponse);
    
    // 清理监听器
    return () => window.removeEventListener('ai-response', handleAIResponse);
  }, [insertText, replaceSelection]);
  
  // 保存当前内容 - 实际上store内已经实现了防抖保存，这里只是UI反馈
  const handleSave = () => {
    // 触发动画或提示
    message.success('内容已保存');
  };
  
  // 撤销和重做
  const handleUndo = () => {
    if (editorRef.current) {
      const editor = editorRef.current.getEditor();
      // 使用正确的方式调用撤销功能
      editor.getModule('history').undo();
    }
  };
  
  const handleRedo = () => {
    if (editorRef.current) {
      const editor = editorRef.current.getEditor();
      // 使用正确的方式调用重做功能
      editor.getModule('history').redo();
    }
  };
  
  return (
    <Spin spinning={!!isLoading?.editor} tip="加载中...">
      <div className="editor-container">
        {/* 顶部工具栏 */}
        <div className="editor-toolbar">
          <div className="toolbar-left">
            <Button type="text" icon={<ArrowLeftOutlined />} />
            <Button type="text" icon={<HistoryOutlined />} />
            <Button type="text" icon={<ReloadOutlined />} />
            <Button type="text" icon={<UndoOutlined />} onClick={handleUndo} />
            <Button type="text" icon={<RedoOutlined />} onClick={handleRedo} />
          </div>
          
          <div className="toolbar-center">
            {selectedChapter && (
              <Text strong>{selectedChapter.title}</Text>
            )}
          </div>
          
          <div className="toolbar-right">
            <Tooltip title="保存">
              <Button type="text" icon={<SaveOutlined />} onClick={handleSave} />
            </Tooltip>
            <Text type="secondary">字数: {stats.words}</Text>
            <Button type="text" icon={<EyeOutlined />} />
            <Button type="text" icon={<SettingOutlined />} />
          </div>
        </div>
        
        {/* 编辑器主体 */}
        <div className="editor-main">
          <ReactQuill
            ref={editorRef}
            theme="snow"
            value={editorContent}
            onChange={handleChange}
            modules={modules}
            formats={formats}
            placeholder="开始创作你的故事..."
          />
        </div>
        
        {/* 底部状态栏 */}
        <div className="editor-statusbar">
          <div className="statusbar-left">
            <Text type="secondary">
              行: {stats.cursor.line} | 列: {stats.cursor.column}
            </Text>
          </div>
          <div className="statusbar-right">
            <Text type="secondary">
              AI助手: {aiStatus}
            </Text>
          </div>
        </div>
      </div>
      
      {/* 样式 */}
      <style jsx global>{`
        .editor-container {
          display: flex;
          flex-direction: column;
          height: 100%;
          background-color: white;
        }
        
        .editor-toolbar {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 8px 16px;
          background-color: #fafafa;
          border-bottom: 1px solid var(--border-color);
        }
        
        .toolbar-left, .toolbar-right {
          display: flex;
          align-items: center;
          gap: 8px;
        }
        
        .toolbar-center {
          flex: 1;
          text-align: center;
        }
        
        .editor-main {
          flex: 1;
          overflow-y: auto;
        }
        
        .editor-statusbar {
          display: flex;
          justify-content: space-between;
          padding: 4px 16px;
          background-color: #fafafa;
          border-top: 1px solid var(--border-color);
        }
        
        /* 自定义ReactQuill样式 */
        .quill {
          height: 100%;
          display: flex;
          flex-direction: column;
        }
        
        .ql-toolbar.ql-snow {
          border: none;
          border-bottom: 1px solid var(--border-color);
        }
        
        .ql-container.ql-snow {
          border: none;
          flex: 1;
        }
        
        .ql-editor {
          padding: 20px;
          font-size: 16px;
          line-height: 1.6;
        }
        
        .ql-editor p {
          text-indent: 2em;
        }
        
        .ql-editor h1, .ql-editor h2, .ql-editor h3 {
          text-align: center;
          margin-bottom: 20px;
        }
        
        .ql-editor h1 {
          font-size: 28px;
          font-weight: bold;
        }
        
        .ql-editor h2 {
          font-size: 24px;
          color: var(--primary-color);
        }
      `}</style>
    </Spin>
  );
};

export default Editor;